<template>
	<div class="cart">
		<header>
			<i class="iconfont icon-fanhui" @click="goBack"></i>
			<span>购物车</span>
			<span>编辑</span>
		</header>
		<section v-if="list.length">
			<div class="cart-title">
				<van-checkbox @click='checkAllFn' :value="isCheckedAll"></van-checkbox>
				<span>商品</span>
			</div>
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<div class="check"> 
						<van-checkbox  v-model="checked"></van-checkbox>
					</div>
					<h2>
						<img :src="item.goods_imgUrl" alt="">
					</h2>
					<div class="goods">
						<div class="goods-title">
							<span>{{item.goods_name}}</span>
							<i class="iconfont icon-shanchu"></i>
						</div>
						<div class="goods-price">￥{{item.goods_price}}</div>
						<van-stepper v-model="item.goods_num" integer />
					</div>
				</li>
			</ul>
		</section>
		<section v-else>
			没有数据，去添加商品吧~
			<router-link to="/home">去首页逛逛</router-link>
		</section>
		<footer v-if="list.length">
			<div class="radio">
				<van-checkbox v-model="checked"></van-checkbox>
			</div>
			<div class="total">
				<div>
					共有
					<span class="total-active">1</span>
					件商品
					</div>
				<div>
					<span>总计：</span>
					<span class="total-active">￥128.00+0茶币</span>
				</div>
			</div>
			<div class="order">去结算</div>
		</footer>
	</div>
</template>

<script>
import http from '@/common/api/request.js';
import {mapMutations, mapState} from 'vuex';
	export default{
		name:"Cart",
		data(){
			return{
				checked:true,
				
			}
		},
		computed:{
			...mapState({
				list:state=>state.cart.list
			}),
		},
		created(){
			this.getData();
		},
		methods:{
			...mapMutations(['cartList']),
			 async getData(){
				let res = await http.$axios({
					url:'/api/selectCart',
					method:'post',
					headers:{
						token:true
					}
				})
				this.cartList( res.data);
			},
			goBack(){
				this.$router.back();
			}
		},
		components: {

		}
	};
</script>
<style scoped>
.cart{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
header{
	display:flex;
	justify-content: space-between;
	align-items: center;
	height: 2.75rem;
	background-color: green;
	color: #fff;
}
header i{
	padding: 0 1.5625rem;
	font-size: 1.375rem;
}
header span{
	padding: 0 1.5625rem;
	font-size: 1rem;
}
section{
	background-color: #f5f5f5;
	height: 100%;
	overflow: hidden;
}
section .cart-title{
	display: flex;
	padding: 1.25rem;
}
.cart-title span{
	padding: 0 1.125rem;
	font-size: 0.875rem;
	font-weight: 500;
}
section ul{
	display: flex;
	flex-direction: column;
}
section ul li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.375rem 1.25rem;
	margin: 0.5rem 0;
	background-color: #fff;
}
section ul li img{
	width: 4.625rem;
	height: 4.625rem;
}
section ul li check{
	padding: 0 0.375rem;
}
section ul li .goods{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 0.75rem;
	padding-left: 0.9375rem;
}
section ul li .goods .goods-title{
	display: flex;
	font-size: 0.75rem;
	font-weight: 400;
}
section ul li .goods .goods-title i{
	font-size: 1.375rem;
}
section ul li .goods .goods-price{
	padding: 0.1875rem 0;
	color: #b0352f;
}
::v-deep .van-stepper{
	text-align: right;
}
footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3rem;
	border-top: 0.125rem solid #ccc;

}
footer .radio{
	padding: 0 0.9375rem;
}
footer .total{
	flex: 1;
	font-size: 0.75rem;
}
footer .total-active{
	color: #b0352f;
}
footer .order{
	width: 7.5rem;
	height: 3rem;
	line-height: 3rem;
	padding: 0 1.25rem;
	color: #fff;
	text-align: center;
	font-size: 1rem;
	background-color: #b0352f;
}
</style>

